<template>
  <div class="login">
    <div class="loginbox" v-loading="loginLoading">
      <div class="abbox1"></div>
      <div class="abbox2"></div>
      <div class="title">
        TISSYS网球智能赛事服务系统
        <br />
        管理员登录
      </div>
      <div class="iptbox">
        <i class="iconfont icon-my_light"></i>
        <input type="text" v-model="username" placeholder="请输入手机号" />
      </div>
      <div class="iptbox">
        <i class="iconfont icon-lock"></i>
        <input
          type="password"
          v-model="password"
          placeholder="请输入密码"
          @keyup.enter="login"
        />
      </div>
      <div id="blank" style="height: 20px"></div>
      <button class="loginbtn" @click="login">登录</button>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>请选择登录方式</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="handleMechanism(2)">机构登录</el-button>
        <el-button type="primary" @click="handleMechanism(1)"
          >裁判登录</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      loginLoading: false,
      dialogVisible: false,
    };
  },
  watch: {
    username() {
      if (this.username.length > 20) {
        this.username = this.username.substring(0, 20);
      }
    },
  },
  methods: {
    handleMechanism(type) {
      this.loginLoading = true;
      var _this = this;
      this.$axios
        .post("/member/doLogin", {
          phone: this.username,
          password: this.password,
          type,
        })
        .then(function (response) {
          if (response.data.status == 400) {
            _this.loginLoading = false;
            _this.$message.error(response.data.message);
          }
          if (response.data.status == 200) {
            window.sessionStorage.setItem("token", response.data.data.token);
            //0 普通用户 1裁判 2机构 3即是裁判和机构
            window.sessionStorage.setItem(
              "user_type",
              response.data.data.user.type
            );
            window.sessionStorage.setItem(
              "username",
              response.data.data.user.name
            );
            window.sessionStorage.setItem(
              "user_id",
              response.data.data.user.id
            );
            window.sessionStorage.setItem("phone", _this.username);
            _this.$store.commit("setUserInfo", response.data.data.user);
            _this.$message({
              title: "自定义位置",
              message: response.data.message,
              type: "success",
            });
            _this.loginLoading = false;
            _this.$router.push("/index/Match");
          }
        })
        .catch(function (error) {});
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    login() {
      this.loginLoading = true;
      var _this = this;
      this.$axios
        .post("/member/doLogin", {
          phone: this.username,
          password: this.password,
        })
        .then(function (response) {
          if (response.data.status == 400) {
            _this.loginLoading = false;
            _this.$message.error(response.data.message);
		  }
		  
          if (response.data.status == 200) {
			  //response.data.data==3既是裁判又是机构
			  if(response.data.data==3){
				  _this.dialogVisible = true
				  return
			  }
            window.sessionStorage.setItem("token", response.data.data.token);
            //0 普通用户 1裁判 2机构 3即是裁判和机构
            window.sessionStorage.setItem(
              "user_type",
              response.data.data.user.type
            );
            window.sessionStorage.setItem(
              "username",
              response.data.data.user.name
            );
            window.sessionStorage.setItem(
              "user_id",
              response.data.data.user.id
            );
            window.sessionStorage.setItem("phone", _this.username);
            _this.$store.commit("setUserInfo", response.data.data.user);
            _this.$message({
              title: "自定义位置",
              message: response.data.message,
              type: "success",
            });
            _this.loginLoading = false;
            _this.$router.push("/index/Match");
          }
        })
        .catch(function (error) {});
    },
  },
};
</script>
<style lang="less" scoped>
.iconfont {
  font-size: 18px;
}

.login {
  width: 100vw;
  height: 100vh;
  // background: linear-gradient(to bottom right,#253647,#2d3a4b);
  background: url(http://qncdn.tissys.com/admin/assets/loginBackground1.png)
    no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .loginbox {
    box-shadow: 1px 1px 3px #eaeaea;
    width: 300px;
    margin: auto;
    // margin-top:160px;
    margin-top: 258px;
    // margin-right: 377px;
    margin-right: 16%;
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    // &:after{
    // 	content: '';
    // 	border-radius: 4px;
    // 	position: absolute;
    // 	top: 24px;
    // 	left: 24px;
    // 	// width: 320px;
    // 	// height: 100px;
    // 	width: 100%;
    // 	height: 100%;
    // 	// background-color: rgba(255, 255, 255, .9);
    // 	background-color: rgba(66, 181, 116, .8);
    // 	z-index: -1;
    // }
    .title {
      color: #727272;
      font-size: 18px;
      text-align: center;
      line-height: 30px;
      font-weight: 500;
      padding-bottom: 10px;
      border-bottom: 1px solid #eaeaea;
    }

    .iptbox {
      margin-top: 20px;
      height: 36px;
      line-height: 34px;
      width: 290px;
      box-shadow: 1px 1px 2px #eaeaea;
      padding: 0 5px;
      border-radius: 4px;
      border: 1px solid #999;

      input {
        display: inline-block;
        font-size: 16px;
        border: 0px;
        padding: 0;
        height: 34px;
        margin: 0;
        width: 260px;
        outline: none;
        background-color: #fff;
        text-indent: 10px;
        vertical-align: top;
      }
    }

    .loginbtn {
      font-size: 16px;
      border: 0;
      height: 40px;
      width: 300px;
      border-radius: 4px;
      // background-color: #409eff;
      background-color: #42b574;
      transition: all 0.1s;
      color: #fff;
    }

    /*.loginbtn:hover{*/
    /*cursor: pointer;*/
    /*background-color: #66b1ff;*/
    /*}*/
    .abbox1 {
      top: -10px;
      left: 20px;
      border-radius: 4px;
      position: absolute;
      // top: 24px;
      // left: 24px;
      // width: 100%;
      // height: 100%;
      // background-color: rgba(66, 181, 116, .9);
      width: 320px;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: -1;
    }

    .abbox2 {
      top: -20px;
      left: 40px;
      border-radius: 4px;
      position: absolute;
      width: 280px;
      height: 100px;
      z-index: -1;
      background-color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
